<template>
  <div class="operation">
    <a-spin :spinning="globalLoading" size="large">
      <div class="top current-header">
        <header>
          <h3><span class="tip"></span> 精华液库存</h3>
          <div class="operation-search">
            <a-form layout="inline">
              <a-form-item label="创建时间">
                <a-range-picker
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  @change="onTime"
                  v-model="defaulttimeList"
                >
                  <template slot="dateRender" slot-scope="current">
                    <div
                      class="ant-calendar-date"
                      :style="getcurrentStyle(current)"
                    >
                      {{ current.date() }}
                    </div>
                  </template>
                </a-range-picker>
              </a-form-item>
              <a-form-item label="厂区">
                <a-select
                  mode="multiple"
                  class="selectwidth"
                  :maxTagCount="1"
                  v-model="searchItem.wsType"
                  placeholder="请选择"
                  @change="handleChangeWSType"
                  style="width: 250px"
                >
                  <a-select-option
                    v-for="item in WSTypeList"
                    :key="item.type"
                    :value="item.type"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item label="站点">
                <a-select
                  mode="multiple"
                  class="selectwidth"
                  :maxTagCount="1"
                  v-model="searchItem.segmentID"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <a-select-option
                    v-for="item in QSegmentList"
                    :key="item.type"
                    :value="item.type"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item label="精华液">
                <a-input v-model="searchItem.materialCodeName" />
              </a-form-item>
              <a-form-item label="批次号">
                <a-input v-model="searchItem.batchNo" />
              </a-form-item>
              <a-form-item label="投料单号">
                <a-input v-model="searchItem.planNo" />
              </a-form-item>
              <a-form-item>
                <a-button class="default-button" @click="getData(true)">
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </header>
        <section>
          <div class="table-basic-box">
            <a-table
              className="components-table-demo-nested"
              :columns="topColumns"
              :row-key="(record) => record.num"
              :data-source="dataPage.Data"
              :loading="dataPage.loading"
              :customRow="customRow"
              :scroll="{ y: topTable }"
              :pagination="false"
              size="middle"
            >
            </a-table>
            <div class="table-paging">
              <a-pagination
                v-model="searchItem.pageRequestModel.pageIndex"
                show-size-changer
                :default-current="1"
                :total="dataPage.TotalNumber"
                @change="onChange"
                @showSizeChange="onshowsizeChange"
              />
            </div>
          </div>
        </section>
      </div>
      <div class="bottom current-header">
        <header>
          <h3><span class="tip"></span> 明细列表</h3>
        </header>
        <section>
          <div class="table-basic-box">
            <a-table
              className="components-table-demo-nested"
              :columns="detailColumns"
              :row-key="(record) => record.num"
              :data-source="currentRow.SemiMGoodsRecordList"
              :loading="semiMGoodsDistributeDetailPage.loading"
              :scroll="{ y: bottomTable }"
              :pagination="false"
              size="middle"
            >
            </a-table>
          </div>
        </section>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { getDistributeSemiMGoodsRecords } from "@/api/SemiMGoodsRecord/index";
import { GetWorkShopTypesAll } from "@/api/WorkShopType/index";
import { GetSegments } from "@/api/NBCSegment/index";
import {
  getDetailData,
  delSemiMGoodsDistributeDetail,
} from "@/api/SemiMGoodsDistributeDetail/index";

import GeneralButton from "@/components/be-current-btn.vue";

import moment from "moment";
import { getTableScroll } from "@/common/table-calc";
const topColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: 60,
  },
  {
    title: "精华液编码",
    dataIndex: "MaterialCode",
    key: "MaterialCode",
    align: "center",
    width: 120,
  },
  {
    title: "精华液名称",
    dataIndex: "MaterialName",
    key: "MaterialName",
    ellipsis: true,
    align: "center",
    width: 200,
  },
  {
    title: "投料单号",
    dataIndex: "PlanNo",
    key: "PlanNo",
    ellipsis: true,
    align: "center",
    width: 120,
  },
  {
    title: "批次号",
    dataIndex: "BatchNo",
    key: "BatchNo",
    ellipsis: true,
    align: "center",
    width: 150,
  },
  {
    title: "初始净重",
    dataIndex: "InitQty",
    key: "InitQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "当前净重",
    dataIndex: "CurQty",
    key: "CurQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "已分配数量",
    dataIndex: "AllocatedQty",
    key: "AllocatedQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "待分配数量",
    dataIndex: "ToAllocatedQty",
    key: "ToAllocatedQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "已分配到计划单号",
    dataIndex: "PackingPlanNo",
    key: "PackingPlanNo",
    ellipsis: true,
    align: "center",
    width: 200,
  },
  {
    title: "已领料数量",
    dataIndex: "RealQty",
    key: "RealQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "超领料数量",
    dataIndex: "OverallocationQty",
    key: "OverallocationQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
  {
    title: "待领料数量",
    dataIndex: "WaitingQty",
    key: "WaitingQty",
    ellipsis: true,
    align: "center",
    width: 100,
  },
]; //预分配表格表头

const detailColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: "10%",
  },
  {
    title: "精华液条码",
    dataIndex: "SMGoodBarcode",
    key: "SMGoodBarcode",
    align: "center",
    width: "40%",
  },
  {
    title: "精华液编码",
    dataIndex: "MaterialCode",
    key: "MaterialCode",
    align: "center",
    width: "40%",
  },
  {
    title: "精华液名称",
    dataIndex: "MaterialName",
    key: "MaterialName",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "投料单号",
    dataIndex: "PlanNo",
    key: "PlanNo",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "批次号",
    dataIndex: "BatchNo",
    key: "BatchNo",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "厂区",
    dataIndex: "WSName",
    key: "WSName",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "站点",
    dataIndex: "SegmentName",
    key: "SegmentName",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "初始净重",
    dataIndex: "InitQty",
    key: "InitQty",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "当前净重",
    dataIndex: "CurQty",
    key: "CurQty",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
]; //预分配表格表头
export default {
  name: "PreStockEssence",
  components: {
    GeneralButton,
  },
  data() {
    return {
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 10,
        },
        startTime: "",
        endTime: "",
        materialCodeName: "",
        wsType: [],
        segmentID: [],
        batchNo: "",
      }, //搜索参数
      isFilterShow: false, //更多筛选显示
      topRowKey: [], //精华液选中值
      topRow: {}, //精华液选中对象
      topColumns, //预分配精华液表头
      topAddShow: false, //预分配精华液添加
      essenceItem: {}, //预分配精华液添加对象
      defaulttimeList: [], //选择时间数组
      topTable: 0, //顶部表格高度
      bottomTable: 0, //底部表格高度
      dataPage: {
        pageIndex: 1,
        pageSize: 10,
        TotalNumber: 0,
        TotalPage: 0,
        isEdit: false, //是否修改预分配
        loading: false, //表格loading
      },
      currentRow: { SemiMGoodsDistributeID: null }, //当前预分配
      semiMGoodsDistributeDetailSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 10,
        },
        semiMGoodsDistributeID: null,
      },
      detailColumns, //明细表头
      semiMGoodsDistributeDetailPage: {
        data: [],
        PageIndex: 1,
        PageSize: 10,
        TotalNumber: 0,
        TotalPage: 0,
        isEdit: false, //是否修改明细
        loading: false, //表格loading
        isShow: false,
        rowKey: [],
        item: {}, //添加的明细对象
      }, //当前明细
      currentDetailPage: {}, //当前明细
      assignedPage: {
        isShow: false,
      }, //已分配
      WSTypeList: [], //厂区列表
      QSegmentList: [], //站点列表
      globalLoading: false, //全局loading
    };
  },
  mounted() {
    this.getData();
  },

  methods: {
    /** 选中厂区 */
    handleChangeWSType(value) {
      let that = this;
      if (value) {
        that.GetSegmentsAllFun(that.searchItem.WSTypeName, true);
      }
    },
    /** 获取厂区列表 */
    async GetWorkShopTypesAllFun() {
      let that = this;
      let res = await GetWorkShopTypesAll(10);
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.WSType, name: item.WSName });
        });
        that.WSTypeList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    },

    //获取车间列表
    async GetSegmentsAllFun(WSType) {
      let that = this;
      let SegSegmentID = [
        "67CE6CD3-0E52-4284-AAFC-E20869415EAA",
        "AE6D566D-D22F-4280-9A14-9375B915AFD0",
      ];
      let res = await GetSegments({
        SegSegmentID: SegSegmentID,
        WSTypeName: WSType,
      });
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.SegmentID, name: item.SegmentName });
        });
        that.QSegmentList = wtList;
      } else {
        that.$message.error(res.Message);
      }
      that.spinning = false;
    },

    /** 点击查询明细 */
    customRow(record, index) {
      let that = this;
      return {
        style: {
          "background-color":
            record.num === that.currentRow?.num ? "#E6F7FF" : "",
        },
        on: {
          // 鼠标单击行
          click: (event) => {
            if (record.SemiMGoodsRecordList.length > 0) {
              record.SemiMGoodsRecordList.forEach((o, i) => {
                o.num = i + 1;
              });
            }
            // 记录当前点击的行标识
            that.currentRow = record;
          },
        },
      };
    },

    /** 查询精华液预分配表格 */
    async getData(flag) {
      if (flag) {
        this.searchItem.pageRequestModel.pageIndex = 1;
        this.searchItem.pageRequestModel.pageSize = 10;
        this.dataPage.Data = [];
        this.dataPage.TotalPage = 0;
        this.dataPage.TotalNumber = 0;
      }
      this.currentRow = {};

      this.globalLoading = true;

      try {
        let { Data } = await getDistributeSemiMGoodsRecords(this.searchItem);
        let { pageIndex, pageSize } = this.searchItem.pageRequestModel;
        Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.ModifyDtName = item.ModifyDt
            ? moment(item.ModifyDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
          item.CreateDtName = item.CreateDt
            ? moment(item.CreateDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
        });
        this.dataPage = Data;
      } catch (e) {
        this.$message.error(e);
      } finally {
        // 关闭loading
        this.globalLoading = false;
      }
    },
    /** 时间选择器的样式填充 */
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    /** 精华液选中项 */
    topTableChangeFun(selectedRowKeys, selectedRows) {
      this.topRow = selectedRows; //选中项信息
      this.topRowKey = selectedRowKeys; //选中项ID
    },
    /** 查询预分配明细 */
    async getDetailDataFun() {
      this.semiMGoodsDistributeDetailSearch.semiMGoodsDistributeID =
        this.currentRow.SemiMGoodsDistributeID;
      try {
        let { Data } = await getDetailData(
          this.semiMGoodsDistributeDetailSearch
        );
        let { pageIndex, pageSize } =
          this.semiMGoodsDistributeDetailSearch.pageRequestModel;
        Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.ModifyDtName = item.ModifyDt
            ? moment(item.ModifyDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
          item.CreateDtName = item.CreateDt
            ? moment(item.CreateDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
        });
        this.semiMGoodsDistributeDetailPage.data = Data.Data;
      } catch (e) {
        this.$message.error(e);
      }
    },
    /** 筛选选择时间 */
    onTime(e, e1) {
      let that = this;
      that.searchItem.startTime = that.dateExt.showDateTime(e[0]);
      that.searchItem.endTime = that.dateExt.showDateTime(e[1]);
    },

    /** 分页选择 */
    onChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getData();
    },

    /** 条数选择 */
    onshowsizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getData();
    },
  },
  created() {
    let that = this;
    that.searchItem.startTime = that.dateExt.getDay(-90);
    that.defaulttimeList[0] = that.searchItem.startTime;
    that.searchItem.endTime = that.dateExt.getDay(1);
    that.defaulttimeList[1] = that.searchItem.endTime;
    that.GetWorkShopTypesAllFun();
  },
  updated() {
    this.$nextTick(() => {
      this.topTable = getTableScroll(90, "TableBasicBox");
      this.bottomTable = getTableScroll(40, "ExtattrbuteTableBox") - 40;
    });
  },
};
</script>
<style scoped lang="less">
.operation {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  flex: 1;
  overflow: hidden;
  position: relative;
  .top,
  .bottom {
    flex: 1;
    margin-bottom: 0.625rem;
    header {
      margin-bottom: 0.625rem;
    }
    h3 {
      display: flex;
      align-items: center;
      .tip {
        height: 5px;
        width: 5px;
        background-color: #009999;
        display: inline-block;
        margin-right: 10px;
      }
    }
    section {
      display: flex;
      flex-direction: column;
      height: calc(100% - 3.75rem);
      .table-basic-box {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;

        .ant-table-wrapper {
          flex: 3;
        }

        .table-paging {
          margin: 0.3125rem 0;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  .bottom {
    flex: 1;
    header {
      .operation-search {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
